<template>
    <!-- 用来初始化 Echarts 的区域 -->
    <el-card class='box-card area'>
          <my-bread level1="数据统计" level2="数据报表"></my-bread>

      <div id="main" style="width: 100%;height:400px;"></div>

    </el-card>
</template>

<script>
import echarts from 'echarts'

export default {
  data () {
    return {
      option: {}
    }
  },
  mounted(){
    this.loadData()
  },
  methods: {
   async loadData(){
        var echarts = require('echarts');

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        //发送请求
        const res = await this.$http.get('reports/type/1');
        console.log(res)

        let option2 = res.data.data;
        // 绘制图表
       let option1 = {
          title: {
              text: '堆叠区域图'
          },
          tooltip : {
              trigger: 'axis',
              axisPointer: {
                  type: 'cross',
                  label: {
                      backgroundColor: '#6a7985'
                  }
              }
          },
          
          toolbox: {
              feature: {
                  saveAsImage: {}
              }
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          }
      };

      this.option ={...option1,...option2};
      myChart.setOption(this.option);

     }
  }
}
</script>

<style>
.area {
  margin: 20px 0;
}
</style>
